<template>
  <el-drawer
    :visible.sync="visible"
    direction="rtl"
    size="50%"
    :close-on-press-escape="false"
    :wrapper-closable="false"
    :show-close="false"
  >
    <template v-slot:title>
      <div class="drawer-header">
        <span>流程配置</span>
        <div>
          <el-button icon="el-icon-close" @click="handleClose">
            取消
          </el-button>
        </div>
      </div>
    </template>
    <el-tabs v-model="activeName">
      <el-tab-pane label="监听器" name="first">
        <div class="filter-container">
          <div style="float: left;">
            <el-button class="filter-item" type="primary" plain icon="el-icon-plus" @click="handleCreateAttr">
              新增
            </el-button>
          </div>
          <div style="float: right;">
            <el-button icon="el-icon-refresh" circle @click="handleFilterAttr" />
          </div>
        </div>
        <el-table
          :data="attr.list"
          border
          style="width: 100%; margin-bottom:20px;"
        >
          <el-table-column
            align="left"
            prop="eventType"
            label="事件类型"
          >
            <template v-slot="{row}">
              <span v-if="row.eventType === 'process_start'">流程开始事件</span>
              <span v-else-if="row.eventType === 'process_end'">流程结束事件</span>
              <span v-else-if="row.eventType === 'task_start'">任务开始事件</span>
              <span v-else-if="row.eventType === 'task_end'">任务结束事件</span>
              <span v-else>未知</span>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            prop="nodeName"
            label="节点名称"
          />
          <el-table-column
            align="left"
            prop="callbackUrl"
            label="回调地址"
          />
          <el-table-column label="操作" align="center" fixed="right" width="150px" class-name="small-padding fixed-width">
            <template v-slot="{row,$index}">
              <el-button size="mini" type="warning" icon="el-icon-edit" @click="handleUpdateAttr(row)">编辑</el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDeleteAttr(row,$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="attr.total" :page.sync="attr.listQuery.pageNum" :limit.sync="attr.listQuery.pageSize" @pagination="handleFilterAttr" />

        <!-- 监听配置编辑页面 -->
        <el-dialog :title="attr.title[audit.state]" :visible.sync="attr.visible" :close-on-click-modal="false" append-to-body width="800px" @close="handleCloseAttr">
          <el-form ref="dataFormAttr" :rules="attr.rules" :model="attr.formData" label-position="right" label-width="100px">
            <el-input v-model="attr.formData.id" type="hidden" />
            <el-input v-model="attr.formData.procDefId" type="hidden" />
            <!--按需调整-->
            <el-row>
              <el-col :span="16">
                <el-form-item label="事件类型" prop="eventType">
                  <el-select v-model="attr.formData.eventType" placeholder="请选择" style="width: 100%;" clearable>
                    <el-option key="process_start" label="流程开始事件" value="process_start" />
                    <el-option key="process_end" label="流程结束事件" value="process_end" />
                    <el-option key="task_start" label="任务开始事件" value="task_start" />
                    <el-option key="task_end" label="任务结束事件" value="task_end" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="节点名称" prop="nodeId">
                  <el-select v-model="attr.formData.nodeId" placeholder="请选择" style="width: 100%;" clearable @change="handleNodeChange">
                    <el-option v-for="(value, key) in userTasks" :key="key" :label="value" :value="key" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="回调地址" prop="callbackUrl">
                  <el-input v-model="attr.formData.callbackUrl" placeholder="请输入" clearable />
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button icon="el-icon-close" @click="handleCloseAttr">
              取消
            </el-button>
            <el-button :loading="attr.submitting" type="primary" icon="el-icon-check" @click="handleSubmitFormDataAttr">
              <span v-if="!attr.submitting">确认</span>
              <span v-else>提 交 中...</span>
            </el-button>
          </div>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="节点权限" name="second">
        <div class="filter-container">
          <div style="float: left;">
            <el-button class="filter-item" type="primary" plain icon="el-icon-plus" @click="handleCreateAudit">
              新增
            </el-button>
          </div>
          <div style="float: right;">
            <el-button icon="el-icon-refresh" circle @click="handleFilterAudit" />
          </div>
        </div>
        <el-table
          :data="audit.list"
          border
          style="width: 100%; margin-bottom:20px;"
        >
          <el-table-column
            align="left"
            prop="nodeName"
            label="节点名称"
          />
          <el-table-column
            align="left"
            prop="candidateUser"
            label="候选人"
          >
            <template v-slot="{row}">
              <span>{{ convertUser(row.candidateUser, users) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            prop="candidatePost"
            label="候选岗位"
          >
            <template v-slot="{row}">
              <span>{{ convertPost(row.candidatePost, posts) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            prop="candidateRole"
            label="候选角色"
          >
            <template v-slot="{row}">
              <span>{{ convertRole(row.candidateRole, roles) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="150px" class-name="small-padding fixed-width">
            <template v-slot="{row,$index}">
              <el-button size="mini" type="warning" icon="el-icon-edit" @click="handleUpdateAudit(row)">编辑</el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDeleteAudit(row,$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="audit.total" :page.sync="audit.listQuery.pageNum" :limit.sync="audit.listQuery.pageSize" @pagination="handleFilterAudit" />

        <!-- 权限配置编辑页面 -->
        <el-dialog :title="audit.title[audit.state]" :visible.sync="audit.visible" :close-on-click-modal="false" append-to-body width="800px" @close="handleCloseAudit">
          <el-form ref="dataFormAudit" :rules="audit.rules" :model="audit.formData" label-position="right" label-width="100px">
            <el-input v-model="audit.formData.id" type="hidden" />
            <el-input v-model="audit.formData.procDefId" type="hidden" />
            <!--按需调整-->
            <el-row>
              <el-col :span="16">
                <el-form-item label="节点名称" prop="nodeId">
                  <el-select v-model="audit.formData.nodeId" placeholder="请选择" style="width: 100%;" clearable @change="handleNodeChange">
                    <el-option v-for="(value, key) in userTasks" :key="key" :label="value" :value="key" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="候选人" prop="candidateUser">
                  <ft-user-select v-model="audit.formData.candidateUser" filterable placeholder="请选择" clearable @change="handleUserChange" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="候选岗位" prop="candidatePost">
                  <ft-post-select v-model="audit.formData.candidatePost" filterable placeholder="请选择" clearable />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="候选角色" prop="candidateRole">
                  <ft-role-select v-model="audit.formData.candidateRole" filterable placeholder="请选择" clearable />
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button icon="el-icon-close" @click="handleCloseAudit">
              取消
            </el-button>
            <el-button :loading="audit.submitting" type="primary" icon="el-icon-check" @click="handleSubmitFormDataAudit">
              <span v-if="!audit.submitting">确认</span>
              <span v-else>提 交 中...</span>
            </el-button>
          </div>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="流程表单" name="third">
        <div class="filter-container">
          <div style="float: left;">
            <el-button class="filter-item" type="primary" plain icon="el-icon-plus" @click="handleCreateForm">
              新增
            </el-button>
          </div>
          <div style="float: right;">
            <el-button icon="el-icon-refresh" circle @click="handleFilterForm" />
          </div>
        </div>
        <el-table
          :data="form.list"
          border
          style="width: 100%; margin-bottom:20px;"
        >
          <el-table-column
            align="left"
            prop="nodeName"
            label="节点名称"
          />
          <el-table-column
            align="left"
            prop="formKey"
            label="表单KEY"
          />
          <el-table-column
            align="left"
            prop="routeTitle"
            label="路由标题"
          />
          <el-table-column
            align="left"
            prop="routePath"
            label="路由地址"
          />
          <el-table-column
            align="left"
            prop="component"
            label="组件路径"
          />
          <el-table-column label="操作" align="center" fixed="right" width="150px" class-name="small-padding fixed-width">
            <template v-slot="{row,$index}">
              <el-button size="mini" type="warning" icon="el-icon-edit" @click="handleUpdateForm(row)">编辑</el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDeleteForm(row,$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="form.total" :page.sync="form.listQuery.pageNum" :limit.sync="form.listQuery.pageSize" @pagination="handleFilterForm" />

        <!-- 流程表单编辑页面 -->
        <el-dialog :title="form.title[form.state]" :visible.sync="form.visible" :close-on-click-modal="false" append-to-body width="800px" @close="handleCloseForm">
          <el-form ref="dataFormForm" :rules="form.rules" :model="form.formData" label-position="right" label-width="100px">
            <el-input v-model="form.formData.id" type="hidden" />
            <el-input v-model="form.formData.procDefId" type="hidden" />
            <!--按需调整-->
            <el-row>
              <el-col :span="16">
                <el-form-item label="节点名称" prop="nodeId">
                  <el-select v-model="form.formData.nodeId" placeholder="请选择" style="width: 100%;" clearable @change="handleNodeChange">
                    <el-option v-for="(value, key) in userTasks" :key="key" :label="value" :value="key" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="表单KEY" prop="formKey">
                  <el-input v-model="form.formData.formKey" :readonly="state==='detail'" placeholder="请输入" clearable />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="路由标题" prop="routeTitle">
                  <el-input v-model="form.formData.routeTitle" :readonly="state==='detail'" placeholder="请输入" clearable />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="路由地址" prop="routePath">
                  <el-input v-model="form.formData.routePath" :readonly="state==='detail'" placeholder="请输入" clearable />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="组件路径" prop="component">
                  <el-input v-model="form.formData.component" :readonly="state==='detail'" placeholder="请输入" clearable />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="表单操作" prop="formBtn">
                  <!--                  <el-input v-model="form.formData.formBtn" :readonly="state==='detail'" placeholder="请输入" clearable />-->
                  <el-checkbox-group v-model="form.formData.formBtn">
                    <el-checkbox label="A" :disabled="state==='detail'">审批通过</el-checkbox>
                    <el-checkbox label="R" :disabled="state==='detail'">审批拒绝</el-checkbox>
                    <el-checkbox label="D" :disabled="state==='detail'">审批驳回</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button icon="el-icon-close" @click="handleCloseForm">
              取消
            </el-button>
            <el-button :loading="form.submitting" type="primary" icon="el-icon-check" @click="handleSubmitFormDataForm">
              <span v-if="!form.submitting">确认</span>
              <span v-else>提 交 中...</span>
            </el-button>
          </div>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>

<script>
import {
  handleGetAttrPageList,
  handleGetCandidatePageList,
  handleGetAllUserTask,
  handleSaveAttr,
  handleDeleteAttr,
  handleSaveCandidate,
  handleDeleteCandidate,
  handleGetFormPageList,
  handleSaveForm,
  handleDeleteForm
} from '@/views/flow/definition/api'
import permission from '@/directive/permission/index' // 权限判断指令
// import checkPermission from '@/utils/permission' // 权限判断函数
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import FtUserSelect from '@/views/components/FtUserSelect/index.vue'
import FtPostSelect from '@/views/components/FtPostSelect/index.vue'
import FtRoleSelect from '@/views/components/FtRoleSelect/index.vue'
import { handleGetAllUserList } from '@/views/sys/userInfo/api'
import { handleGetAllRoleList } from '@/views/sys/role/api'
import { handleGetAllPostList } from '@/views/sys/post/api'
import { convertUser, convertPost, convertRole } from '@/utils'

export default {
  // 当前页面名称（组件）
  name: 'FlowDefinitionConfig',
  // 引用组件
  components: { Pagination, FtUserSelect, FtPostSelect, FtRoleSelect },
  directives: { permission, waves },
  filters: {},
  // props属性
  props: {
    params: {
      type: Object,
      require: true,
      default: undefined
    }
  },
  data() {
    return {
      attr: {
        // 列表table的key
        tableKey: 0,
        // 遮罩层
        loading: true,
        // table数据对象
        list: [],
        // 总条数
        total: 0,
        // table条件查询对象
        listQuery: {
          pageNum: 1,
          pageSize: 10,
          param: {
            procDefId: undefined
          }
        },
        // 表单数据对象
        formData: {
          processDefId: undefined
        },
        // 是否显示弹出层
        visible: false,
        // 弹出层状态值（新增和修改共用同一个表单页面）
        state: '',
        // 弹出层标题
        title: {
          update: '修改',
          create: '新增',
          detail: '详情'
        },
        submitting: false,
        // 表单校验规则
        rules: {
          eventType: [{ required: true, message: '事件类型不能为空', trigger: 'change' }]
        }
      },
      audit: {
        // 列表table的key
        tableKey: 0,
        // 遮罩层
        loading: true,
        // table数据对象
        list: [],
        // 总条数
        total: 0,
        // table条件查询对象
        listQuery: {
          pageNum: 1,
          pageSize: 10,
          param: {
            procDefId: undefined
          }
        },
        // 表单数据对象
        formData: {
          processDefId: undefined
        },
        // 是否显示弹出层
        visible: false,
        // 弹出层状态值（新增和修改共用同一个表单页面）
        state: '',
        // 弹出层标题
        title: {
          update: '修改',
          create: '新增',
          detail: '详情'
        },
        submitting: false,
        // 表单校验规则
        rules: {
          nodeId: [{ required: true, message: '节点名称不能为空', trigger: 'change' }]
        }
      },
      form: {
        // 列表table的key
        tableKey: 0,
        // 遮罩层
        loading: true,
        // table数据对象
        list: [],
        // 总条数
        total: 0,
        // table条件查询对象
        listQuery: {
          pageNum: 1,
          pageSize: 10,
          param: {
            procDefId: undefined
          }
        },
        // 表单数据对象
        formData: {
          processDefId: undefined,
          formBtn: []
        },
        // 是否显示弹出层
        visible: false,
        // 弹出层状态值（新增和修改共用同一个表单页面）
        state: '',
        // 弹出层标题
        title: {
          update: '修改',
          create: '新增',
          detail: '详情'
        },
        submitting: false,
        // 表单校验规则
        rules: {
          nodeId: [{ required: true, message: '节点名称不能为空', trigger: 'change' }],
          formBtn: [{ required: true, message: '表单操作类型不能为空', trigger: 'change' }]
        }
      },
      // 表单数据对象
      formData: {
        processDefId: undefined
      },
      // 是否显示弹出层
      visible: false,
      // 弹出层状态值（新增和修改共用同一个表单页面）
      state: '',
      // 弹出层标题
      title: {
        update: '修改',
        create: '新增',
        detail: '详情'
      },
      activeName: 'first',
      defKeys: [],
      userTasks: [],
      users: [],
      posts: [],
      roles: []
    }
  },
  computed: {},
  watch: {},
  created() {
    handleGetAllUserList().then(res => {
      this.users = res.data
    })
    handleGetAllPostList().then(res => {
      this.posts = res.data
    })
    handleGetAllRoleList().then(res => {
      this.roles = res.data
    })
  },
  mounted() {},
  methods: {
    convertUser,
    convertPost,
    convertRole,
    handleInit() {
      this.formData.processDefId = this.params.processDefId

      this.visible = this.params.visible
      this.attr.listQuery.param.procDefId = this.params.processDefId
      this.handleFilterAttr()
      this.audit.listQuery.param.procDefId = this.params.processDefId
      this.handleFilterAudit()
      this.form.listQuery.param.procDefId = this.params.processDefId
      this.handleFilterForm()
    },
    handleFilterAttr() {
      this.loading = true
      this.attr.listQuery.pageNum = 1
      handleGetAttrPageList(this.attr.listQuery).then(res => {
        this.attr.list = res.data
        this.loading = false
      })
    },
    handleFilterAudit() {
      this.loading = true
      this.audit.listQuery.pageNum = 1
      handleGetCandidatePageList(this.audit.listQuery).then(res => {
        this.audit.list = res.data
        this.loading = false
      })
    },
    handleFilterForm() {
      this.loading = true
      this.form.listQuery.pageNum = 1
      handleGetFormPageList(this.form.listQuery).then(res => {
        this.form.list = res.data
        this.loading = false
      })
    },
    // 重置表单
    handleRestFormData() {
      this.audit.formData = {
        procDefKey: undefined,
        candidatePost: undefined,
        candidateRole: undefined,
        candidateUser: undefined,
        nodeName: undefined,
        nodeId: undefined
      }
      this.attr.formData = {
        procDefKey: undefined,
        attrName: undefined,
        attrValue: undefined,
        eventType: undefined,
        nodeName: undefined,
        nodeId: undefined
      }
      this.form.formData = {
        procDefKey: undefined,
        formKey: undefined,
        routeTitle: undefined,
        routePath: undefined,
        component: undefined,
        formBtn: [],
        nodeName: undefined,
        nodeId: undefined
      }
    },
    // 所有的人工节点
    handleGetAllUserTask(processDefId) {
      handleGetAllUserTask({ processDefId: processDefId }).then(res => {
        this.userTasks = res.data
      })
    },
    handleNodeChange(value) {
      this.attr.formData.nodeName = this.userTasks[value]
      this.audit.formData.nodeName = this.userTasks[value]
      this.form.formData.nodeName = this.userTasks[value]
    },
    handleUserChange(data) {
      console.log('用户选择返回')
      console.log(data)
    },
    // 新增监听配置
    handleCreateAttr() {
      this.attr.state = 'create'
      this.attr.visible = true
      this.attr.formData.procDefId = this.formData.processDefId
      this.handleGetAllUserTask(this.formData.processDefId)
      this.$nextTick(() => {
        this.$refs['dataFormAttr'].clearValidate()
      })
    },
    // 修改监听配置
    handleUpdateAttr(row) {
      this.attr.state = 'update'
      this.attr.visible = true

      // 创建一个新的对象赋值
      this.attr.formData = Object.assign({}, row)
      // 清理掉多余的属性值，避免数据不对问题
      delete this.attr.formData.createdBy
      delete this.attr.formData.createdTime
      delete this.attr.formData.updatedBy
      delete this.attr.formData.updatedTime
      delete this.attr.formData.tenantId
      delete this.attr.formData.revision
      delete this.attr.formData.deleted

      this.handleGetAllUserTask(this.formData.processDefId)
      this.$nextTick(() => {
        this.$refs['dataFormAttr'].clearValidate()
      })
    },
    // 删除监听配置
    handleDeleteAttr(row, index) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        handleDeleteAttr({ id: row.id }).then((res) => {
          //  刷新table
          this.handleFilterAttr()
          this.handleCloseAttr()
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'success',
            duration: 4000
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 监听配置提交
    handleSubmitFormDataAttr() {
      this.$refs['dataFormAttr'].validate((valid) => {
        if (valid) {
          this.attr.submitting = true
          handleSaveAttr(this.attr.formData).then((res) => {
            this.attr.submitting = false
            //  刷新table
            this.handleFilterAttr()
            this.handleCloseAttr()
            this.$message({
              showClose: true,
              message: res.msg,
              type: 'success',
              duration: 4000
            })
          })
        }
      })
    },
    // 新增权限配置
    handleCreateAudit() {
      this.audit.state = 'create'
      this.audit.visible = true
      this.audit.formData.procDefId = this.formData.processDefId
      this.handleGetAllUserTask(this.formData.processDefId)
      this.$nextTick(() => {
        this.$refs['dataFormAudit'].clearValidate()
      })
    },
    // 修改权限配置
    handleUpdateAudit(row) {
      this.audit.state = 'update'
      this.audit.visible = true

      // 创建一个新的对象赋值
      this.audit.formData = Object.assign({}, row)
      // 清理掉多余的属性值，避免数据不对问题
      delete this.audit.formData.createdBy
      delete this.audit.formData.createdTime
      delete this.audit.formData.updatedBy
      delete this.audit.formData.updatedTime
      delete this.audit.formData.tenantId
      delete this.audit.formData.revision
      delete this.audit.formData.deleted

      this.handleGetAllUserTask(this.formData.processDefId)
      this.$nextTick(() => {
        this.$refs['dataFormAudit'].clearValidate()
      })
    },
    // 删除权限配置
    handleDeleteAudit(row, index) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        handleDeleteCandidate({ id: row.id }).then((res) => {
          //  刷新table
          this.handleFilterAudit()
          this.handleCloseAudit()
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'success',
            duration: 4000
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 权限配置提交
    handleSubmitFormDataAudit() {
      this.$refs['dataFormAudit'].validate((valid) => {
        if (valid) {
          this.audit.submitting = true
          handleSaveCandidate(this.audit.formData).then((res) => {
            this.audit.submitting = false
            //  刷新table
            this.handleFilterAudit()
            this.handleCloseAudit()
            this.$message({
              showClose: true,
              message: res.msg,
              type: 'success',
              duration: 4000
            })
          })
        }
      })
    },
    // 新增流程表单
    handleCreateForm() {
      this.form.state = 'create'
      this.form.visible = true
      this.form.formData.procDefId = this.formData.processDefId
      this.handleGetAllUserTask(this.formData.processDefId)
      this.$nextTick(() => {
        this.$refs['dataFormForm'].clearValidate()
      })
    },
    // 修改流程表单
    handleUpdateForm(row) {
      this.form.state = 'update'
      this.form.visible = true

      // 创建一个新的对象赋值
      this.form.formData = Object.assign({}, row)
      this.form.formData.formBtn = this.form.formData.formBtn.split(',')
      // 清理掉多余的属性值，避免数据不对问题
      delete this.form.formData.createdBy
      delete this.form.formData.createdTime
      delete this.form.formData.updatedBy
      delete this.form.formData.updatedTime
      delete this.form.formData.tenantId
      delete this.form.formData.revision
      delete this.form.formData.deleted

      this.handleGetAllUserTask(this.formData.processDefId)
      this.$nextTick(() => {
        this.$refs['dataFormForm'].clearValidate()
      })
    },
    // 删除流程表单
    handleDeleteForm(row, index) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        handleDeleteForm({ id: row.id }).then((res) => {
          //  刷新table
          this.handleFilterForm()
          this.handleCloseForm()
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'success',
            duration: 4000
          })
        })
      }).catch((err) => {
        console.error('异常-->:', err)
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 流程表单提交
    handleSubmitFormDataForm() {
      this.$refs['dataFormForm'].validate((valid) => {
        if (valid) {
          this.form.submitting = true
          this.form.formData.formBtn = this.form.formData.formBtn.join(',')
          handleSaveForm(this.form.formData).then((res) => {
            this.form.submitting = false
            //  刷新table
            this.handleFilterForm()
            this.handleCloseForm()
            this.$message({
              showClose: true,
              message: res.msg,
              type: 'success',
              duration: 4000
            })
          })
        }
      })
    },
    // 权限配置关闭
    handleCloseAttr() {
      this.handleRestFormData()
      this.attr.visible = false
    },
    // 权限配置关闭
    handleCloseAudit() {
      this.handleRestFormData()
      this.audit.visible = false
    },
    // 流程表单关闭
    handleCloseForm() {
      this.handleRestFormData()
      this.form.visible = false
    },
    // 关闭弹出层
    handleClose() {
      this.handleRestFormData()
      this.activeName = 'first'
      this.visible = false
    }
  }
}
</script>
